<template>
  <div style="height: 100%">
    <img class="result-img" :src="url" alt @click="clearStorage($event)">
    <canvas ref="canvas" id="canvas"></canvas>
    <slot></slot>
    <slot name="img"></slot>
  </div>
</template>

<script>
import utils from "@/utils";
import { setTimeout } from "timers";
export default {
  name: "",
  data() {
    return {
      scale: window.devicePixelRatio,
      url: "",
      count: 0
    };
  },
  async mounted() {
   
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    canvas.height = document.body.clientHeight * this.scale;
    canvas.width = document.body.clientWidth * this.scale;
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    await this.draw(ctx, canvas);
    setTimeout(() => {
      this.url = canvas.toDataURL("image/jpeg");
    }, 200);
  },
  computed: {
    childs() {
      // console.log(this.$scopedSlots.default());
      return this.$slots;
    },
    fontArr() {
      return this.childs.default
        .filter(item => item.tag)
        .map(item => this.getComputedStyle(item.elm));
    },
    imgArr() {
      if (!this.childs.img) return [];
      return this.childs.img
        .filter(item => item.tag)
        .map(async item => await this.getImgStyle(item.elm));
    }
  },
  methods: {
    clearStorage(e) {
      if (e.clientY < 300) {
        this.count++;
      }
      if (this.count > 5) {
        let channel = utils.getChannelInfo().channel;
        localStorage.clear("camellia-sample-discern");
        location.href = "/camellia-sample/?channel=" + channel;
      }
    },
    async draw(ctx, canvas) {
      try {
        console.log(this.fontArr);
        this.fontArr.forEach(item => this.drawText(item, ctx, canvas));
        const arr = await Promise.all(this.imgArr);
        arr.map(item => this.drawImg(ctx, item));
      } catch (e) {
        console.log(e);
      }
    },
    drawText(
      {
        fontSize = 28,
        top,
        text,
        color = "#666",
        fontFamily,
        align = "center"
      } = {
        fontSize,
        top,
        text,
        color,
        fontFamily,
        align
      },
      ctx,
      canvas
    ) {
      ctx.font = `${fontSize * this.scale}px ${fontFamily}`;
      ctx.textAlign = align;
      ctx.fillStyle = color;
      ctx.textBaseline = "hanging";
      ctx.fillText(text, canvas.width / 2, top * this.scale);
    },
    getComputedStyle(el) {
      const style = window.getComputedStyle(el);
      const fontSize = this.px2int(style.fontSize);
      const top = this.px2int(style.top);
      const fontFamily = style.fontFamily;
      const text = el.innerText;
      console.log(el.innerText);
      const color = style.color;
      return {
        fontSize,
        top,
        text,
        fontFamily,
        color
      };
    },
    loadImg(img) {
      return new Promise(resolve => {
        const image = new Image();
        image.src = img.src;
        image.onload = () => {
          resolve(image);
        };
      });
    },
    drawImg(
      ctx,
      { top = 0, left = 0, width, img } = {
        top,
        left,
        width,
        img
      }
    ) {
      const n = img.height / img.width;
      ctx.drawImage(
        img,
        left * this.scale,
        top * this.scale,
        width * this.scale,
        width * n * this.scale
      );
    },
    async getImgStyle(el) {
      try {
        const style = el.getBoundingClientRect();
        const top = this.px2int(window.getComputedStyle(el).top);
        const left = style.left;
        const width = style.width;
        const img = await this.loadImg(el);
        return {
          top,
          left,
          width,
          img
        };
      } catch (e) {
        console.log(e);
      }
    },
    px2int(str) {
      if (str) return parseInt(str.replace("px", ""));
      return str;
    }
  }
};
</script>

<style>
body,
html {
  /* min-height: 603px; */
}

#canvas {
  display: none;
  height: 100%;
  width: 100%;
}

.result-img {
  position: relative;
  z-index: 2;
  opacity: 0;
}

img {
  width: 100%;
}
</style>
